<template>
  <div class="login-page">
    <div class="form-wrapper">
      <div class="pic-content">
        <div class="pic"></div>
      </div>
      <div class="login-content">
        <!--        <div class="logo-box">-->
        <!--          <div class="logo"></div>-->
        <!--        </div>-->
        <p class="title">注册账号</p>
        <el-form
            ref="registryFormRef"
            label-position="top"
            :model="registryForm"
            label-width="auto"
            class="demo-ruleForm"
            status-icon>
          <el-form-item prop="userAccount" label-position="">
            <el-input size="large" v-model="registryForm.userAccount" placeholder="账号(4-18位的字母和数字组合)" autocomplete="off">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="userPassword" label-position="">
            <el-input type="password" show-password size="large" v-model="registryForm.userPassword" placeholder="密码(6-18位的字母和数字及特殊字符组合)" autocomplete="off">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="againPassword" label-position="">
            <el-input type="password" show-password size="large" v-model="registryForm.againPassword" placeholder="确认密码(6-18位的字母和数字及特殊字符组合)" autocomplete="off">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <div class="submit-btn">
            <el-button size="large" :disabled="!registryForm.userAccount || !registryForm.userPassword || !registryForm.againPassword" type="primary" :loading="registryLoading" @click="handleRegistry">注册</el-button>
          </div>
          <div class="tip-row">
            <el-button link type="primary" @click="handleGotoLogin">登录账号</el-button>
          </div>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {useRouter, useRoute} from "vue-router";
import api from './api/index.js'
import common from "~/common/common.js";
import {md5} from 'js-md5'

const router = useRouter()
const route = useRoute()
const registryLoading = ref(false)
const registryFormRef = ref()
const registryForm = ref({
  userAccount: '',
  userPassword: '',
  againPassword: '',
})
const redirectUrl = decodeURIComponent(route.query.redirectUrl || '')
const appId = route.query.appId || ''
onMounted(() => {

})

const passwordCheck = (newPassword) => {
  let pwdCount = 0;//统计密码包含了几种字符
  const pwdRegex1 = new RegExp('(?=.*[0-9]).{6,18}');//纯数字
  const pwdRegex2 = new RegExp('(?=.*[a-z]).{6,18}');//小写字母
  const pwdRegex3 = new RegExp('(?=.*[A-Z]).{6,18}');//大写字母
  const pwdRegex4 = new RegExp('(?=.*[^a-zA-Z0-9]).{6,18}');//特殊字符
  if (pwdRegex1.test(newPassword)) {
    pwdCount = pwdCount + 1;
  }
  if (pwdRegex2.test(newPassword)) {
    pwdCount = pwdCount + 1;
  }
  if (pwdRegex3.test(newPassword)) {
    pwdCount = pwdCount + 1;
  }
  if (pwdRegex4.test(newPassword)) {
    pwdCount = pwdCount + 1;
  }
  return pwdCount
}
const handleRegistry = async () => {
  try {
    await registryFormRef.value.validate()
    if (!registryForm.value.userAccount || !registryForm.value.userPassword || !registryForm.value.againPassword) {
      return
    }
    if (registryForm.value.userPassword !== registryForm.value.againPassword) {
      ElMessage.error('两次输入的密码不一致')
      return
    }
    if (!/^[0-9a-zA-Z]{4,18}$/.test(registryForm.value.userAccount)) {
      ElMessage.error('账号只能由数字和大小写字母组成，长度4-18位')
      return
    }
    const count = passwordCheck(registryForm.value.userPassword)
    if (count < 2) {
      ElMessage.error('密码必须包含大小写字母、数字和特殊字符中的至少两种，长度6-18位')
      return
    }
    registryLoading.value = true
    api.createUser({
      userAccount: registryForm.value.userAccount,
      userPassword: md5(registryForm.value.userPassword),
    }).then(async (res) => {
      registryLoading.value = false
      if (res.data) {
        ElMessage.success('注册成功')
        router.replace(`/login?appId=${appId}&redirectUrl=${encodeURIComponent(redirectUrl)}`)
      } else {
        ElMessage.error(res.message || '注册失败')
      }
    }).catch(e => {
      registryLoading.value = false
      ElMessage.error('注册异常')
    })
  } catch(e){
    console.log(e)
  }
}

const handleGotoLogin = () => {
  router.replace(`/login?appId=${appId}&redirectUrl=${encodeURIComponent(redirectUrl)}`)
}
</script>

<style scoped lang="scss">
.login-page{
  position: relative;
  height: 100%;
  width: 100%;
  //background-image: linear-gradient(to right bottom, #005ec4, #0071c2, #007db1, #00859a, #038b84);
  background-image: linear-gradient(to right bottom, rgb(83 153 249), rgb(110 88 231));
  background-size: 100% 100%;
}
.form-wrapper{
  position: absolute;
  width: 878px;
  //height: 426px;
  //padding: 56px 66px 67px;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate3d(-50%, -50%, 0);
  //background-image: linear-gradient(135deg, rgba(139, 198, 236, 0.45) 0%, rgba(149, 153, 226, 0.45) 100%);
  box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.15);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background: url("./assets/images/login_pic3.png");
  background-size: 100% 100%;
  .pic-content{
    //width: 406px;
    //height: 100%;
    position: relative;
    padding: 30px;
    .pic{
      width: 436px;
      height: 365px;
      background: url("./assets/images/login_pic.png");
      background-size: 100% 100%;
    }
  }
  .login-content{
    position: relative;
    flex: 1;
    //background: #f9f9f9;
    padding: 60px 30px 30px;
    margin-left: 30px;
    .title{
      font-size: 18px;
      color: var(--el-color-primary);
      margin-bottom: 20px;
    }
  }
  .logo-box{
    position: relative;
    padding-bottom: 20px;
    //text-align: center;
    .logo{
      display: inline-block;
      width: 177.5px;
      height: 64px;
      background-image: url("./assets/images/logo_s2.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .form-title{
    padding: 20px 0;
    text-align: center;
  }
  .userPassword-btn{
    position: absolute;
    right: 25px;
  }
  .submit-btn .el-button{
    width: 100%;
  }
}
.locale-box{
  position: absolute;
  right: 100px;
  top:100px;
}
.tip-row{
  padding-top: 15px;
  text-align: right;
}
</style>
